<template>
	<div class="com-content">
		<div style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;">
			<block v-for="(ite,ind) in arrayImgs(imgs)" :key="ind">
				<img @click="handlePreview(ite,ind)" :src="ite" :style="{width:imgW,height:imgH}"
					style="margin-right: 5px;margin-bottom: 5px;max-width: 100%;overflow: hidden;"></img>
			</block>
		</div>
		<!-- <img-preview :url="previewImage" v-if="previewImage!=''"></img-preview> -->
		<j-modal title="预览" :width="800" :visible="previewVisible" switchFullscreen @ok="privacyDialogShow=true"
			@cancel="handleCancel" @toggleFullscreen="toggleFullscreen"
			:okButtonProps="{ class:{ 'jee-hidden': disableSubmit1 } }"
			:cancelButtonProps="{ class:{ 'jee-hidden': disableSubmit1 } }" okText="提交">
			<div class="scroll-view" style="width: 100%;overflow-y:scroll;" :style="{height:is_full?'100%':'600px'}">
				<template v-if="previewType === 'image'">
					<!-- <img alt="example" style="width: 100%" :src="previewImage" /> -->
					<img-preview :url="previewImage" ></img-preview>
				</template>
				<template v-else>
					<iframe :src="previewImage" frameborder="0" scrolling="no" id="bi_iframe" @load="adjustIframe"
						style="position: absolute; top: 55px; left: 0px"></iframe>
				</template>
			</div>
		</j-modal>
	</div>
</template>

<script>
	import 'viewerjs/dist/viewer.css'; //图片预览样式
	import {component as Viewer} from "v-viewer"; //图片预览组件
	import { api as viewerApi } from "v-viewer";
	const FILE_TYPE_ALL = "all";
	const FILE_TYPE_IMG = "image";
	const FILE_TYPE_TXT = "file";
	import base from '@/utils/base64.js';
	import imgPreview from "@/components/yzjt/imgPreview.vue";
	export default {
		name: 'imgsPreview',
		components: {
			imgPreview
		},
		data() {
			return {
				//预览图片
				previewVisible: false,
				disableSubmit1: true,
				previewImage: '',
				is_full: false,
			}
		},
		props: {
			imgs: {
				type: String,
				default: ""
			},
			imgW: {
				type: String,
				default: ""
			},
			imgH: {
				type: String,
				default: ""
			},
			fileType: {
				type: String,
				required: false,
				default: FILE_TYPE_ALL
			},
			isClose:{
				type:Boolean,
				default:false
			}
		},
		created() {
			//this.imgss  = this.arrayImgs(this.imgs);
		},
		methods: {
			toggleFullscreen(record) {
				this.is_full = record;
			},
			adjustIframe(record) {
				var ifm = document.getElementById("bi_iframe");
				ifm.height = document.documentElement.clientHeight;
				ifm.width = '100%'; //document.documentElement.clientWidth;
				this.$forceUpdate();
				//ifm.overflowY = 'scroll';
			},
			//字符粗转数组
			arrayImgs(imgUrl) {
				let lists = [];
				if (!!imgUrl) {
					lists = imgUrl.split(',');
				}
				return lists
			},
			handlePreview(file,index) {
				console.log(21, file,index)
				let _self = this;
				if (this.fileType === FILE_TYPE_IMG) {
					let iii = 0;
					let imgs = [];
					imgs = this.arrayImgs(this.imgs).map((v,ind)=>({
						src:v,
						source:v,
						id:ind,
					}));
					if(imgs && imgs.length>0){
						imgs.forEach((ii,i)=>{
							if(ii.id === index){
								iii = i;
							}
						})
					}
					const $viewer = viewerApi({
						options: {
							toolbar: true,
							url: 'source',
							initialViewIndex: iii
						},
						images: imgs
					})
					if(this.isClose){
						this.$emit('close');
					}
				} else {
					const fileType = this.matchFileType(file);
					this.previewType = fileType;
					if (fileType === 'image') {
						let iii = 0;
						let imgs = [];
						imgs = this.arrayImgs(this.imgs).map((v,ind)=>({
							src:v,
							source:v,
							id:ind,
						}));
						if(imgs && imgs.length>0){
							imgs.forEach((ii,i)=>{
								if(ii.id === index){
									iii = i;
								}
							})
						}
						const $viewer = viewerApi({
							options: {
								toolbar: true,
								url: 'source',
								initialViewIndex: iii
							},
							images: imgs
						})
						if(this.isClose){
							this.$emit('close');
						}
					} else {
						this.$nextTick(() => {
							let base64 = new base;
							let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(
								base64.encode(file.url)); //encodeURIComponent(base64.encode(file.url))
							//_self.previewImage = url;
							window.open(url);
							//let resultNew = encodeURIComponent(file.url)
							//window.open("https://view.officeapps.live.com/op/view.aspx?src="+ resultNew);
							//window.open("https://file.kkview.cn/onlinePreview?url=aHR0cDovLzEyNC43MC4yMDQuMTI2OjgwODAvamVlY2ctYm9vdC9zeXMvY29tbW9uL3N0YXRpYy90ZW1wL%2Ba1i%2BivlemihOiniGRfMTY4MTcyMzAwNjQ2OC5kb2M%3D");
							//_self.previewVisible = true;
							_self.$forceUpdate();
						})
					}
				}
			},
			/**
			 * 根据文件名后缀区分 文件类型
			 *
			 * @param: fileName - 文件名称
			 * @param: 数据返回 1) 无后缀匹配 - false
			 * @param: 数据返回 2) 匹配图片 - image
			 * @param: 数据返回 3) 匹配 txt - txt
			 * @param: 数据返回 4) 匹配 excel - excel
			 * @param: 数据返回 5) 匹配 word - word
			 * @param: 数据返回 6) 匹配 pdf - pdf
			 * @param: 数据返回 7) 匹配 ppt - ppt
			 * @param: 数据返回 8) 匹配 视频 - video
			 * @param: 数据返回 9) 匹配 音频 - radio
			 * @param: 数据返回 10) 其他匹配项 - other
			 */
			matchFileType(fileName) {
				// 后缀获取
				let suffix = '';
				// 获取类型结果
				let result = '';
				if (!fileName) return false;
				try {
					// 截取文件后缀
					suffix = fileName.substr(fileName.lastIndexOf('.') + 1, fileName.length)
					// 文件后缀转小写，方便匹配
					suffix = suffix.toLowerCase()
				} catch (err) {
					suffix = '';
				}
				// fileName无后缀返回 false
				if (!suffix) {
					result = false;
					return result;
				}
				let fileTypeList = [
					// 图片类型
					{
						'typeName': 'image',
						'types': ['png', 'jpg', 'jpeg', 'bmp', 'gif']
					},
					// 文本类型
					{
						'typeName': 'txt',
						'types': ['txt']
					},
					// excel类型
					{
						'typeName': 'excel',
						'types': ['xls', 'xlsx']
					},
					{
						'typeName': 'word',
						'types': ['doc', 'docx']
					},
					{
						'typeName': 'pdf',
						'types': ['pdf']
					},
					{
						'typeName': 'ppt',
						'types': ['ppt']
					},
					// 视频类型
					{
						'typeName': 'video',
						'types': ['mp4', 'm2v', 'mkv']
					},
					// 音频
					{
						'typeName': 'radio',
						'types': ['mp3', 'wav', 'wmv']
					}
				]
				// let fileTypeList = ['image', 'txt', 'excel', 'word', 'pdf', 'video', 'radio']
				for (let i = 0; i < fileTypeList.length; i++) {
					const fileTypeItem = fileTypeList[i]
					const typeName = fileTypeItem.typeName
					const types = fileTypeItem.types
					result = types.some(function(item) {
						return item === suffix;
					});
					if (result) {
						return typeName
					}
				}
				return 'other'
			},
			handleCancel() {
				this.previewVisible = false;
			},
		}
	}
</script>

<style>
	.com-content {
		display: flex;
		flex-direction: column;
	}

	.jee-hidden {
		display: none
	}
</style>